<!doctype html>
<html>
    <head lang="ru">
        <title>Bexf Extension</title>
        <script type="text/javascript" src="Bexf.js"></script>
        <script type="text/javascript">
            window.addEventListener("load", function() {

                // button config
                var buttonOptions = {
                    disabled: false,
                    title: "Bexf Button Example",
                    icon: "icons/icon-18.png"
                };

                // popup config
                var popupOptions = {
                    href: "popup.html",
                    width: 400,
                    height: 150
                };

                var timeout = 60;

                // creating new button
                var button = $
                .createButton(buttonOptions)
                // update popup options
                .attr(popupOptions)
                // update title
                .attr('title', 'Bexf Button Example\nTitle Updated via attr')
                // click event listener
                .click(function () {
                    button.text('click');
                })
                // remove event listener
                .remove(function () {
                    // create new tab
                    var tab = $.createTab({url: 'https://www.google.com/', focused: true});
                    // and close it on timeout
                    window.setTimeout(function () {
                        tab.close();
                        // and open new tab
                        $.createTab({url: 'http://www.ya.ru/', focused: true});
                    }, 5000);
                });

                // some background timer
                window.setInterval(function () {
                    // update popup width/height
                    button.attr('height', Math.random() * 100 + 100);
                    button.attr('width', Math.random() * 300 + 100);
                    timeout--;
                    if (timeout === 0) {
                        // remove button from panel
                        button.removeFromPanel();
                    } else {
                        // update button text
                        button.text(timeout);
                    }
                    // update button badge color
                    if (Math.random() > 0.5) {
                        button.attr('color', 'white');
                        button.attr('backgroundColor', 'green');
                    } else {
                        button.attr('color', 'white');
                        button.attr('backgroundColor', 'red');
                    }
                    // post message
                    $.postMessage(Math.random());
                }, 1000);

                // as soon as possible add to panel
                button.addToPanel();

                $.connect(function () {
                    // calls when options closed or browser starts
                });

                $.disconnect(function () {
                    // calls when options opened or browser unloads
                });

            }, false);
        </script>
    </head>
    <body></body>
</html>